import React from 'react'
import { connect } from 'react-redux'
import { DetailWrapper, Header, Content } from './style'
import { getDetail } from './store'
import { withRouter } from 'react-router-dom'
class Detail extends React.Component {

    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        // console.log(this.props.match.params.id);

        return (
            <DetailWrapper>
                <Header>{this.props.title}</Header>
                <Content dangerouslySetInnerHTML={{ __html: this.props.content }}>

                </Content>
            </DetailWrapper>
        )
    }
    componentDidMount() {
        this.props.getDetail(this.props.match.params.id)
    }
}
const mapStateToProps = (state) => {
    return {
        title: state.getIn(['detail', 'title']),
        content: state.getIn(['detail', 'content'])
    }
}
const mapDispatchToProps = (dispatch) => ({
    getDetail(id) {
        dispatch(getDetail(id))
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail))
